<template> 
      <div class="page-part">
      <div><img src="./img/7.jpg" class="imgaes"/></div>
      <mt-field label="账户" placeholder="请输入手机号码" :state="statelogin"  v-model="username" class="user" @input="event"></mt-field>
      <mt-field label="密码" placeholder="密码" :state="statepass" type="password" v-model="password" class="password"></mt-field>
      <mt-button
      @touchstart.native="login"  class="login">登陆</mt-button>
      </div>
</template>

<script>
import {
    mapMutations,
    mapState
} from 'vuex'
import * as api from '@/requests/api'
export default {
 name:"Login",
 data () {
   return {
       username:'',
       password:'',
       statelogin:'',
       statepass:''
   }
 },
 computed:{
   ...mapState(['users'])
 },
 watch: {
   users(val){
       console.log(val)
       if(val.isLogin === true) {
           const {redirect = '/home'} = this.$route.params
            this.$router.push(redirect)
        }
      }
 },
 methods: {
     ...mapMutations(['loginSuccess']),
     login () {
       console.log(this)
        const {
            username,
            password
        }=this 
        console.log(this)
        
       
        this.$http.post(api.LOGIN,{
            username,
            password
        }).then((resp) => {
            console.log(resp)
          if (resp.data.res_code === 200 && resp.data.res_error === 'success') {            
            this.loginSuccess(resp.data.data)
            console.log(resp.data.data)
          }else{

          }
        })
        console.log(this)
        this.$router.push({
        path: '/Home'       
      })
     },
     event(){
         console.log("aaa")
          const {
            username,
            password
        }=this 
          if(!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(username))){
            this.statelogin='error'
           this.statepass="error"
             return alert('账号只能为11位数字')
        }else{
             this.statelogin='success'
           this.statepass="success"
        }
        if(username==="" || password===""){          
           this.statelogin='error'
           this.statepass="error"
           return alert('账号密码不能为空')
        }else{
            this.statelogin="success"
           this.statepass="success"
        }
     }
 }
}
</script>

<style lang='scss' scoped>
.page-part{
    background:#ffffff ;
    height: 100%;
    width: 100%;
    .imgaes{
            display: block;
            width: 25.90rem;
    }
    .user{
        display: block;
          margin-bottom: 1.55rem;
          border-bottom:1px solid #dfdfdf;
          height: 24px;
          width: 300px;
          margin: 30px auto;
       
    }
}

.password{
       display: block;
       margin: 30px auto;
          margin-bottom: 1.55rem;
          border-bottom:1px solid #dfdfdf;
          height: 24px;
          width: 300px;
}
.login{
     margin: 30px 10%;
     background:#b9b9b9;
     width: 288px;
     height: 33px;
}
</style>
